<template>
	<div class="page">
		<Head navTitle="个人资料" />
		<div class="page-container ">
			<div class="bs-panel ">
				<!-- 修改个人资料 -->
				<div class="upload-grid">
					<div class="upload-box">
						<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
							:show-file-list="false" >
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<div class="upload-txt">点击上传头像</div>
					</div>
				</div>
				<div class="bs-m-form">
					<el-form ref="editform" :model="editform" label-position="top">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="昵称">
									<el-input v-model="editform.ncname" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="生日">
									<el-date-picker v-model="editform.birthday" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="手机区号">
									<el-select v-model="editform.quhao" placeholder="请选择" style="width: 100%;">
										<el-option label="区域一" value="shanghai"></el-option>
										<el-option label="区域二" value="beijing"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="手机号码">
									<el-input v-model="editform.phone" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="middle-line"></div>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="输入原始密码">
									<el-input v-model="editform.pwd1" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="新登入密码">
									<el-input v-model="editform.pwd2" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="提现密码">
									<el-input v-model="editform.pwd3" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="验证码">
									<div class="flex-center">
										<div class="flex_bd">
											<el-input v-model="editform.code" placeholder="请输入验证码"></el-input>
										</div>
										<el-button type="success" class="get-code" @click.prevent="getCode()"
											:disabled="!show">
												<span v-show="show">获取验证码</span>
												<span v-show="!show" class="count">{{count}} s</span>
										</el-button>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="dialog-lang-footer">
					<el-button type="success" @click="editVshow = false">保 存</el-button>
					<el-button type="info" @click="editVshow = false">取 消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				// 弹出
				editVshow: false,
				editform: {
					ncname: 'LI',
					birthday: '2021-09-10',
					quhao: '86',
					phone: '15573070908',
					pwd1: '123456',
					pwd2: '123456',
					pwd3: '123456',
					code: '',
				},
				imageUrl: require('../../assets/images/touxiang.png'),
				show: 'false',
				count: '',

			};
		},
		methods: {
			getCode() {
				// 验证码倒计时
				if (!this.timer) {
					this.count = 60;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= 60) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			}

		}
	}
</script>
